<!--
 * @Date: 2023-06-10 22:50:57
 * @LastEditTime: 2023-06-10 23:26:01
 * @FilePath: /prepaid-refill/src/views/market/components/dayAddAddress.vue
 * 介绍:
-->
<script lang="ts" setup>
import { generateRandomStr } from "@@/utils/tools/generate";
import { randomNum, _require } from "@@/utils/tools/tools";
const { t } = useI18n();
const addressList = reactive<
  {
    address: string;
    type: string;
    amount: number;
  }[]
>([]);
generateRandomList();
/**生成随机列表*/
function generateRandomList() {
  //循环生成随机列表
  for (let i = 0; i < 10; i++) {
    addressList.push({
      address: generateRandomAddress(),
      type: t("xin-zeng"),
      amount: randomNum(10, 100),
    });
  }
  //为滚动障眼法准备,使得首尾数据看起来一致
  for (let i = 0; i < 8; i++) {
    addressList.push(addressList[i]);
  }
}
/**生成随机地址*/
function generateRandomAddress() {
  let res = `0x`;
  res += generateRandomStr(8);
  res += "....";
  res += generateRandomStr(8);
  return res;
}
</script>

<template>
  <Ccard>
    <template #header>
      <h3>{{ $t("jin-ri-xin-zeng-di-zhi") }}</h3>
    </template>
    <div class="flex-J-SB flex-A-C">
      <div class="flex-A-C">
        <Rimage
          height="1.5em"
          width="1.5em"
          :src="_require('src/assets/icons/address.png')"
        />
        <span class="ml-sm">{{ $t("huo-de-di-zhi") }}</span>
      </div>
      <div class="flex-A-C">
        <Rimage
          height="1.8em"
          width="1.8em"
          :src="_require('src/assets/images/logo/NAC.png')"
        />
        <span class="ml-sm">{{ $t("huo-de-bbc") }}</span>
      </div>
    </div>
    <div class="randomList">
      <div
        class="randomList_item info-layout"
        v-for="item in addressList"
        :key="item.address"
      >
        <div style="color: red">{{ item.type }}</div>
        <div>{{ item.address }}</div>
        <div>{{ item.amount }}</div>
      </div>
    </div>
  </Ccard>
</template>

<style lang="less" scoped>
.randomList {
  height: 800rem;
  overflow-y: hidden;
  .randomList_item {
    --height: 100rem;
    line-height: var(--height);
    height: var(--height);
    animation: uproll 8s linear infinite;
  }
}
/*滚动动画*/
@keyframes uproll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc((0rem - var(--height)) * 10));
  }
}
</style>
